<template>
    <div>
        <el-container class="container_home">
            <el-header class="header_home">
                <div class="header_img">
                    <el-image :src="src" style="width: 200px; height: 60px">
                        <div slot="placeholder" class="image-slot">
                            加载中<span class="dot">...</span>
                        </div>
                    </el-image>
                </div>
                <div class="header_nav">
                    <el-menu :default-active="active_nav_hm" :router="true" class="el-menu-demo nav_menu" mode="horizontal"
                             @select="handleSelect">
                        <el-menu-item index="testPage">接口测试</el-menu-item>
                        <el-menu-item index="projectManage">项目管理</el-menu-item>
                        <el-menu-item index="4">环境配置</el-menu-item>
                        <el-menu-item index="2">成员和权限</el-menu-item>
                        <el-menu-item index="3">系统设置</el-menu-item>
                    </el-menu>
                </div>
            </el-header>
            <keep-alive>
                <router-view></router-view>
            </keep-alive>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: 'Home',
        data() {
            return {
                src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                active_nav_hm: "testPage",
                msg:[
                    {a:'1'},
                    {a:'1'}
                ]
            }
        },
        methods: {
            handleSelect(key, keyPath) {
                console.log("选中回调" + key, keyPath);
            }
        }
    }
</script>
<style>
    .container_home  {
        height: 100%;
        min-height: 600px;
        border: 1px solid #eee;
    }

    .header_home{
        width: 100%;
    }

    .header_img {
        position: absolute;
        left: 8px;
    }

    .header_nav {
        margin-left: 180px;
    }
</style>
